<template>
	<div class="scheroot">
		<div class="button-group">
			<Button type="primary" @click="createScheduling" style="marginRight:10px;">新增排产</Button>
			<Button type="primary" @click="editScheduling" style="marginRight:10px;">编辑排产</Button>
			<Button type="primary" @click="removeScheduling">删除排产</Button>
		</div>

		<div class="date-select sche">
			<div>
			 	<span>排程日期：</span>
			 	<DatePicker type="date" format="yyyy-MM-dd" v-model="date_value"  style="width: 200px" size="small" @on-change="changeDate"></DatePicker>
			</div>
			<div>
				<span>计划开始时间：</span>
				<span>{{dateTitle_form.startTime}}</span>
			</div>
			<div>
				<span>计划结束时间：</span>
				<span>{{dateTitle_form.endTime}}</span>
			</div>
			<div>
				<span>计划产量：</span>
				<span>{{dateTitle_form.productCount}}片</span>
			</div>
			<div  @mouseenter="plan_modal = true">
				<span>推荐排产量：</span>
				<span>{{dateTitle_form.productCountPerDay}}片/天</span>
			</div>
		</div>
        <Modal v-model="plan_modal" draggable scrollable title="计划内各型号产量安排预览">
	        <div>
	        	<el-table :data="dateCon_list"  border  stripe fit highlight-current-row  class="jc_table_wrap sche">
					<el-table-column label="型号"  >
						<template scope="scope">{{scope.row.productName}}</template>
					</el-table-column>
					<el-table-column  label="计划数"  >
						<template scope="scope">{{scope.row.productCount}}</template>
					</el-table-column>
					<el-table-column  label="推荐排产量/天" >
						<template scope="scope">{{scope.row.productCountPerDay}}</template>
					</el-table-column>
					<el-table-column  label="推荐晶棒发料(颗/天)" >
						<template scope="scope">{{scope.row.sendJingbangPerDay}}</template>
					</el-table-column>
				</el-table> 
	        </div>
	         <div slot="footer">
	            <Button type="primary" @click="plan_modal = false">关闭</Button>
	        </div>
	    </Modal>
         

		<Tabs value="name1" type="card">
	        <TabPane label="表格" name="name1">
	        	<div class="search-table sche">
	        		<label for="" class="sche_label">工序:</label><el-select v-model="tableSearch_form.processes" placeholder="请选择" clearable style="width:160px;marginRight:20px">
						<el-option v-for="item in processOptions" :key="item.id" :label="item.processName" :value="item.id"></el-option>
					</el-select> 

					<label for="" class="sche_label">工艺:</label><el-select v-model="tableSearch_form.technics" placeholder="请选择" clearable style="width:160px;marginRight:20px">
						<el-option v-for="item in processPathOptions" :key="item.id" :label="item.pathName" :value="item.id"></el-option>
					</el-select>
                    
                    <label for="" class="sche_label">设备名称:</label><Input v-model="tableSearch_form.equipment" placeholder="" style="width: 150px;marginRight:20px;vertical-align:top;" /> 
                    <label for="" class="sche_label">产品型号:</label><Input v-model="tableSearch_form.productmodel" placeholder="" style="width: 150px;marginRight:20px;vertical-align:top;" /> 
                    <Button type="primary" icon="ios-search"  style="vertical-align:top;" @click="tableSearch">查询</Button>
	        	</div>

	        	<el-table :height="tableHeight" :data="list"  border  stripe fit highlight-current-row  @selection-change="handleSelectionChange" class="jc_table_wrap sche">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column label="工序" width="100">
								<template scope="scope">{{scope.row.process}}</template>
						</el-table-column>

						<el-table-column  label="产品型号" width="150">
								<template scope="scope">{{scope.row.productModel}}</template>
						</el-table-column>
						<el-table-column  label="设备" width="150">
								<template scope="scope">{{scope.row.equipment}}</template>
						</el-table-column>

						<el-table-column  label="工艺" width="150">
								<template scope="scope">{{scope.row.processPath}}</template>
						</el-table-column>
						<el-table-column  label="排产数量" width="120">
								<template scope="scope">{{scope.row.scheduleYield}}片</template>
						</el-table-column>

						<el-table-column  label="发料颗数" width="120">
								<template scope="scope">{{scope.row.sendJingbangCount}}颗</template>
						</el-table-column>
						<el-table-column  label="班次排产数量" >
							<template scope="scope">
								<span>白班：{{scope.row.baitianYeild}}片</span>;
								<span>夜班：{{scope.row.wanshangYeild}}片</span>
							</template>
						</el-table-column>
				</el-table> 
                <Page :total="total" show-elevator show-total @on-change="handlePagechange" />

	        </TabPane>
	        <TabPane label="设备" name="name2">
	        	<div class="search-equipment sche" >
	        		<label for="" class="sche_label">工序:</label><el-select v-model="equipmentSearch_form.processes" placeholder="请选择" clearable style="width:160px;marginRight:20px">
						<el-option v-for="item in processOptions" :key="item.id" :label="item.processName" :value="item.id"></el-option>
					</el-select>

					 <label for="" class="sche_label">设备名称:</label><Input v-model="equipmentSearch_form.equipment" placeholder="" style="width: 150px;marginRight:20px;vertical-align:top;" /> 

					<Button type="primary" icon="ios-search"  style="vertical-align:top;" @click="equipmentSearch">查询</Button>

	        	</div>

	        	<div class="list-equipment sche" :style="{height:tableHeight+'px'}">
	        		<div class="item-equipment" v-for="item in equipmentList" :key="item.id" >
	        			<div class="equipment-title">{{item.name}}</div>
	        			<div class="equipment-con">
	        				<div>
		        				<span>所在工序：</span><span>{{item.name}}</span>
	        			    </div>
	        			    <div>
		        				<span>设备状态：</span><span>{{item.name}}</span>
	        			    </div>
	        			    <div>
		        				<span>加工型号：</span><span>{{item.name}}</span>
	        			    </div>
	        			    <div>
		        				<span>加工型号：</span><span>{{item.name}}</span>
	        			    </div>
	        			    <div>
		        				<span>在行工艺：</span><span>{{item.name}}</span>
	        			    </div>
	        			    <div>
		        				<span>排产任务数：</span><span>{{item.name}}</span>
	        			    </div>
	        			    <div>
		        				<span>实际加工数：</span><span>{{item.name}}</span>
	        			    </div>
	        			</div>
	        		</div>
	        	</div>
	        </TabPane>
	    </Tabs>

 <!--新建-->
	    <Modal v-model="create_modal" draggable scrollable  width="800">
	    	<div slot="header" style="text-align:center">
	            <span style="font-size:20px">新增排产</span>
			</div>
	        <div>
	        	<div class="create_form_con sche">
	                <div>
	                	<label for="" class="sche_label">工序:</label><el-select v-model="create_form.processId" placeholder="请选择" @change="handleProcessChange" clearable style="width:160px;marginRight:20px">
							<el-option v-for="item in processOptions" :key="item.id" :label="item.processName" :value="item.id"></el-option>
						</el-select>
	                </div>
	                <div>
	                	<label for="" class="sche_label">工艺:</label><el-select v-model="createProcessPathId" placeholder="请选择"  clearable style="width:160px;marginRight:20px" @change="handleProcessPathChange">
							<el-option v-for="item in processPathOptions" :key="item.id" :label="item.pathName" :value="item.id"></el-option>
						</el-select>
	                </div>
	                <div>
	                	<label for="" class="sche_label">产品型号:</label><el-select v-model="create_form.productModel" placeholder="请选择" clearable style="width:160px;marginRight:20px">
							<el-option v-for="item in productModelOptions" :key="item.id" :label="item.name" :value="item.name"></el-option>
						</el-select>
	                </div>
	                <div>
	                	<label for="" class="sche_label">颜色卡</label><ColorPicker v-model="create_form.cardColor" alpha recommend />
	                </div>
	                <div>
	                	<label for="" class="sche_label">排产数:</label><Input v-model="create_form.scheduleYield"  style="width: 120px" /> 
	                </div>
	                <div>
	                	<label for="" class="sche_label">白班:</label><Input v-model="create_form.baitianYeild" style="width: 120px" /> 
	                </div> 
	                <div>
	                	<label for="" class="sche_label">夜班:</label><Input v-model="create_form.wanshangYeild"  style="width: 120px"/> 
	                </div>
	                <div>
	                	<label for="" class="sche_label">发料晶棒数:</label><Input v-model="create_form.sendJingbangCount"  style="width: 120px"/> 
	                </div>
                </div>
                <div class="create_textarea">
                	<label for="" class="sche_label">加工台:</label><Input v-model="checkAllGroups" type="textarea" /> 
                </div> 
                <div style="margin-top:10px;margin-left:50px;box-sizing:border-box">
                    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange"  >
				        <Checkbox :label="item.name" v-for="item in machines" :key="item.id" style="font-size:16px;margin:8px;border:1px solid #2d8cf0;border-radius:5px;width:100px;padding:4px;box-sizing:border-box"></Checkbox>
				    </CheckboxGroup>
                </div>
	        </div>
	        <div slot="footer">
	            <Button type="primary" style="width:100px" @click="createConfirm">保存</Button>
	            <Button type="primary" style="width:100px" @click="createCancel">取消</Button>
	        </div>
	    </Modal>
<!--编辑-->
	    <Modal v-model="edit_modal" draggable scrollable  width="800">
	    	<div slot="header" style="text-align:center">
	            <span style="font-size:20px">修改排产</span>
			</div>
	        <div>
	        	<div class="create_form_con sche">
	                <div>
	                	<label for="" class="sche_label">工序:</label><el-select v-model="edit_form.processId" placeholder="请选择" @change="handleProcessChange" clearable style="width:160px;marginRight:20px">
							<el-option v-for="item in processOptions" :key="item.id" :label="item.processName" :value="item.id"></el-option>
						</el-select>
	                </div>
	                <div>
	                	<label for="" class="sche_label">产品型号:</label><el-select v-model="edit_form.productModel" placeholder="请选择" clearable style="width:160px;marginRight:20px">
							<el-option v-for="item in productModelOptions" :key="item.id" :label="item.name" :value="item.name"></el-option>
						</el-select>
	                </div>
	                <div>
	                	<label for="" class="sche_label">颜色卡</label><ColorPicker v-model="edit_form.cardColor" alpha recommend />
	                </div>
	                <div>
	                	<label for="" class="sche_label">排产数:</label><Input v-model="edit_form.scheduleYield"  style="width: 120px" /> 
	                </div>
	                <div>
	                	<label for="" class="sche_label">白班:</label><Input v-model="edit_form.baitianYeild" style="width: 120px" /> 
	                </div> 
	                <div>
	                	<label for="" class="sche_label">夜班:</label><Input v-model="edit_form.wanshangYeild"  style="width: 120px"/> 
	                </div>                      
	                <div>
	                	<label for="" class="sche_label">发料晶棒数:</label><Input v-model="edit_form.sendJingbangCount"  style="width: 120px"/> 
	                </div>
                </div>
                <div class="create_textarea">
                	<label for="" class="sche_label">加工台:</label><Input v-model="checkAllGroups_edit" type="textarea" /> 
                </div> 
                <div style="margin-top:10px;margin-left:50px;box-sizing:border-box">
                    <CheckboxGroup v-model="checkAllGroup_edit" @on-change="checkAllGroupChange"  >
				        <Checkbox :label="item.name" v-for="item in machines" :key="item.id" style="font-size:16px;margin:8px;border:1px solid #2d8cf0;border-radius:5px;width:100px;padding:4px;box-sizing:border-box"></Checkbox>
				    </CheckboxGroup>
                </div>
	        </div>
	        <div slot="footer">
	            <Button type="primary" style="width:100px" @click="editConfirm">保存</Button>
	            <Button type="primary" style="width:100px" @click="editCancel">取消</Button>
	        </div>
	    </Modal>
	</div>
</template>
<script>
import * as scheduling from "@/api/scheduling/scheduling.js";
var moment = require('moment');

export default{
	data(){
		return{
			date_value:'',
			multipleSelection: [],
			list:[],
			equipmentList:[
			// {id:22,name:'隔壁老王'},{id:23,name:'隔壁老王'},{id:24,name:'隔壁老王'},{id:25,name:'隔壁老王'},{id:26,name:'隔壁老王'},{id:27,name:'隔壁老王'},{id:28,name:'隔壁老王'},{id:29,name:'隔壁老王'},{id:221,name:'隔壁555555555555555老王'},{id:222,name:'隔壁老王'},{id:223,name:'隔壁老王'},{id:224,name:'隔壁老王'},{id:225,name:'隔壁老王'},{id:226,name:'隔壁老王'}
			],
			processOptions:[],
			processPathOptions:[],
			productModelOptions:[],
			tableSearch_form:{processes:'',technics:''},
			equipmentSearch_form:{processes:''},
			dateTitle_form:{},
			dateCon_list:[],
			value: '',
			plan_modal :false,
			create_modal:false,     
			edit_modal:false,
			create_form:{processId:'', productModel:'', processPathId:'', cardColor:'rgba(45,140,240,1)'},
			createProcessPathId:'',
			edit_form:{processId:'', productModel:'',cardColor:'rgba(45,140,240,1)'},
            checkAllGroup: [],
            checkAllGroup_edit:[],
			machines:[],
            p:1,
            pageNum:1,
			total:0
		}
	},
	methods:{
		loadScheduleTable(p){
			scheduling.listByPage({pageSize:10,pageNum:p}).then(data =>{
                 this.list = data.rows
                 this.total = data.total;
			})

		},
		loadlistProcess(){
            scheduling.listProcess().then(data =>{
            	this.processOptions = data
			})
		},
		loadlistProcessPath(){
            scheduling.listProcessPath().then(data =>{
            	this.processPathOptions = data;
			})
		},
		loadlistproductModel(){
            scheduling.listProduct().then(data =>{
            	this.productModelOptions = data;
            })  
		},
		tableSearch(){
            console.log(this.tableSearch_form)
		},
		equipmentSearch(){
            console.log(this.equipmentSearch_form)
		},
        createScheduling(){
            this.create_modal = true;
            this.create_form = {processId:'', productModel:'',cardColor:'rgba(45,140,240,1)'};
            this.create_form.scheduleDate = moment(this.date_value).format('YYYY-MM-DD');
            this.create_form.recommendYield = this.dateTitle_form.productCountPerDay
        },
        createConfirm(){
            this.create_form.equipment = this.checkAllGroups;
            console.log(this.create_form);
            scheduling.create(this.create_form).then(data =>{
            	this.create_modal = false;
            	// this.loadScheduleTable();
            	this.handlePagechange(1)
            })
        }, 
        createCancel(){
            this.create_modal = false;
        },
        editScheduling(){
            if(this.multipleSelection.length === 0) {
                  this.$message({
                    type:'warning',
                    message:'请先勾选行'
                  }) 
            }else if(this.multipleSelection.length >= 2) {
                   this.$message({
                    type:'warning',
                    message:'每次最多勾选一行'
                  })  
            }else if(this.multipleSelection.length === 1){
                this.edit_modal = true; 
                console.log(this.multipleSelection[0])
                scheduling.update({id:this.multipleSelection[0].id}).then((data)=>{
                      console.log(data)
                    this.edit_form = data.msg;
                    this.checkAllGroup_edit = data.msg.equipment.split(',')
                })

            }
        },
        editConfirm(){
            console.log(this.edit_form)
            this.edit_form.equipment = this.checkAllGroups_edit;
            scheduling.updatePost(this.edit_form).then(()=>{
                 console.log(11111111);
                 this.edit_modal = false;
                //  this.edit_form = {};
                 this.checkAllGroup_edit = [];
                 this.handlePagechange(this.pageNum);
            })
        },
        editCancel(){
            this.edit_modal = false;
            // this.edit_form = {};
            this.checkAllGroup_edit = [];
        },
        removeScheduling(){
            if(this.multipleSelection.length === 0) {
                this.$message({
                type:'warning',
                message:'请先勾选行'
                }) 
            }else{
                this.$confirm('是否删除该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let a = [];
                    this.multipleSelection.forEach((currentValue,index) => {
                        a.push(currentValue.id)
                    })
                    scheduling.deleteMany({ids:a.join(',')}).then(()=>{
                        this.handlePagechange(1);
                        this.$message({
                            type:'success',
                            message:'删除成功！'
                        })
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                });

            }
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
            // console.log(val);
        },
        changeDate(date){
	        this.date_value = date;
            scheduling.getPlanMonth({selectDay:date}).then(data =>{
            	this.dateTitle_form = data.planMonth
            	var s = moment(this.dateTitle_form.startTime).format('YYYY-MM-DD');
            	var e = moment(this.dateTitle_form.endTime).format('YYYY-MM-DD');
            	this.dateTitle_form.startTime = s
            	this.dateTitle_form.endTime = e
            	this.dateCon_list = data.productPlanMonths
            	// console.log(this.dateCon_list);
			})
        },
        checkAllGroupChange(){

        },
        handleProcessChange(val){
            let a= '';
			this.processOptions.forEach(function(currentValue,index){
				if(currentValue.id ==  val){
                    a = currentValue.processName
				}
			})
              
			scheduling.listEquipment({process:a}).then(data =>{
             	this.machines = data
            })

            this.create_form.process = a;
        },
        handleProcessPathChange(val){
            console.log('val',val)
            let a= '';
			this.processPathOptions.forEach(function(currentValue,index){
				if(currentValue.id ==  val){
                    a = currentValue.pathName
				}
			})
			this.create_form.processPathId =val;
            this.create_form.processPath = a;
        },
        handlePagechange(val){
            this.pageNum = val
            console.log(val)
            this.loadScheduleTable(val);
        }
	},
	computed: {
		tableHeight() {
			const filterHeight = 28
			var tableHeight = this.getTableHeight(filterHeight)-50;
			return tableHeight-30;
		},
		checkAllGroups(){
			return this.checkAllGroup.join(',')
        },
        checkAllGroups_edit(){
            return this.checkAllGroup_edit.join(';')
        }
    },   
    created() {
		this.loadScheduleTable();  //打开页面加载排程表格
		this.loadlistProcess();    //加载 工序列表
		this.loadlistProcessPath(); //加载工艺列表
		this.loadlistproductModel();  //加载产品型号列表
		this.changeDate(moment(new Date()).format('YYYY-MM-DD'))
	}  
}
</script>
<style>
	.scheroot{
       width: 100%;
       box-sizing: border-box;
       padding: 10px;

	}
	.date-select.sche{
		height: 34px;
		margin:10px 0;
		border:1px solid #ccc;
		border-radius: 5px;

		display: flex;
	}
	.date-select.sche>div{
		flex:1;
		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 14px;
	}
	.date-select.sche>div:first-child{
	    flex-basis: 100px; 
	}

	label.sche_label{
		font-size: 14px;
		margin-right:8px;
	}
    .search-table.sche{
		margin-bottom: 10px;
	}
	.search-table.sche .el-input__icon+.el-input__inner,
	.search-equipment.sche .el-input__icon+.el-input__inner,
	.create_form_con.sche .el-input__icon+.el-input__inner{
		height: 32px;
	}
    .sche.el-table th{
        background-color: #2d8cf0!important; 
        text-align: center;
    }
    .sche.el-table th>.cell{
        background-color: #2d8cf0!important;  
    }
    .sche.el-table tr{
        text-align: center;
    }
    .sche.list-equipment{
    	overflow: auto;
    	margin-top: 10px;

    	display: flex;
    	flex-wrap: wrap;
    	padding-bottom: 10px;
    	box-sizing: border-box;
    	border:1px solid #eee;
    }
    .sche .item-equipment{
    	border:1px solid #2d8cf0;
    	margin-top: 10px;
    	margin-left: 10px;
        font-size: 16px;  
    }
    .sche .equipment-title{
    	border-bottom: 1px solid #2d8cf0;
    	text-align: center;
    	padding: 5px;
    	box-sizing: border-box;

    }
    .sche .equipment-con{
    	padding: 5px;
    	box-sizing: border-box;
    }

    /*新建*/
    .sche.create_form_con{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .sche.create_form_con>div{
    	margin-bottom: 10px;
        display: flex;
    }
    .sche.create_form_con label.sche_label,
    .create_textarea  label.sche_label{
		 display: block;
		 padding-left:10px;
		 box-sizing: border-box;
		 min-width: 55px;
		 display: flex;
		 justify-content: flex-end;
		 align-items: center;
	}
	.create_textarea{
		display: flex;
	}
	.create_form_con.sche  .el-select{
		width: 120px!important;
		margin-right: 0!important;
	}
    .create_form_con.sche .el-input__icon+.el-input__inner{
		width: 120px;
	} 
</style>